<template>
  <div class="main">
    <div class="filter">
      <el-input placeholder="请输入单号" v-model="dh"></el-input>
      <el-button class="el-icon-search" @click="getDetail" size="small" type="primary"
                 style="width: 100%;margin: 5px 0;">搜 索
      </el-button>
    </div>
    <div class="result">
      <!--      <el-collapse>-->
      <div v-if="result.length === 0" class="no-data">无数据</div>
      <div v-if="result.length">
        <el-row class="des-box">
          <el-col :span="3" class="des-title">客户编号</el-col>
          <el-col :span="9" class="des-content">{{ result[0].khbh }}</el-col>
          <el-col :span="3" class="des-title">客户名</el-col>
          <el-col :span="9" class="des-content">{{ result[0].khname }}</el-col>
          <el-col :span="3" class="des-title">日期</el-col>
          <el-col :span="9" class="des-content">{{ result[0].rq }}</el-col>
          <el-col :span="3" class="des-title">总金额</el-col>
          <el-col :span="9" class="des-content">{{ totalJe }}</el-col>
        </el-row>
      </div>
      <el-divider>商品列表</el-divider>
      <div v-for="item in result" :key="item.dh" class="result-box">
        <el-row class="des-box">
          <el-col :span="3" class="des-title">商品：</el-col>
          <el-col :span="21" class="des-content">{{ item.spname }}</el-col>
          <el-col :span="3" class="des-title">件数：</el-col>
          <el-col :span="9" class="des-content">{{ item.prnjs }}</el-col>
          <el-col :span="3" class="des-title">小数：</el-col>
          <el-col :span="9" class="des-content">{{ item.prnxs }}</el-col>
          <el-col :span="3" class="des-title">单价：</el-col>
          <el-col :span="9" class="des-content">{{ item.jg }}</el-col>
          <el-col :span="3" class="des-title">小计：</el-col>
          <el-col :span="9" class="des-content">{{ item.je }}</el-col>
        </el-row>
      </div>

      <!--        <el-collapse-item v-for="item in result" :title="item.dh" :key="item.dh">-->
      <!--          <template slot="title">-->
      <!--            商品：-->
      <!--            <el-tag size="mini" style="max-width: 130px;overflow: hidden">{{ item.spname }}</el-tag>-->
      <!--            件数：-->
      <!--            <el-tag size="mini">{{ item.prnjs }}</el-tag>-->
      <!--            小数：-->
      <!--            <el-tag size="mini">{{ item.prnxs }}</el-tag>-->
      <!--            单价：-->
      <!--            <el-tag size="mini">{{ item.jg }}</el-tag>-->
      <!--            小计：-->
      <!--            <el-tag size="mini">{{ item.je }}</el-tag>-->
      <!--          </template>-->
      <!--        </el-collapse-item>-->
      <!--      </el-collapse>-->
    </div>
  </div>
</template>

<script>
import {getZDdetail} from "@/api/goods";

export default {
  name: "detail",
  data() {
    return {
      dh: '',
      result: [],
      totalJe: 0
    }
  },
  methods: {
    getDetail() {
      if (this.dh !== '') {
        getZDdetail(this.dh).then(res => {
          if (res.code === 200) {
            this.result = res.data
            if (res.data.length === 0) {
              this.$message.warning('查询为空')
            } else {
              let totalJe = 0
              res.data.forEach(each => {
                totalJe += each.je
              })
              this.totalJe = totalJe
            }
          }
        })

        this.$buryingPoint('查询账单详情', this.dh)
      } else {
        this.$message.error('请输入单号')
      }

    }
  },
  created() {
    if (this.$route.query.dh) {
      this.dh = this.$route.query.dh
      this.getDetail()
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 10px;
  max-width: 600px;

  .result {
    .no-data {
      padding: 20px;
      text-align: center;
      color: #ccc;
    }

    .result-box {
      font-size: 14px;
      margin: 5px 0;
    }

    .el-tag {
      margin: 5px;
    }

    .des-box {
      border-top: 1px solid #6595c7;
      border-left: 1px solid #6595c7;
      font-size: 14px;
    }

    .des-title {
      height: 32px;
      background-color: #c1d7ea;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }

    .des-content {
      height: 32px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }
  }
}
</style>
